<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			表单数据：
				若：<input type="text"/>，则v-model收集的是value值， 用户输入的就是value值。
				若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
				若：<input type="checkbox"/>
					1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
				2.配置input的value属性：
					 (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 末勾选，是布尔值）
					（2）v-model的初始值是数组，那么收集的的就是value组成的数组
				备注：v-model的三个修饰符：
				lazy：尖去焦点再收集数据
				number：输入字符串转为有效的数字
				trim：输入首尾空格过滤
		 -->
		<!-- 创建容器 -->
		<div id="root">
		<form action="" method="post"><br><br>
			账号：<input type="text" v-model.trim="account"/><br><br>
			密码:<input type="password" v-model.trim="passsword"/><br><br>
			<!-- 加上在v-model后加.number，可以把字符串转化为数值 -->
			年龄:<input type="number" v-model.number="age" />
			性别：
			男 <input type="radio" name="sex" v-model="sex" value="male"/>
			女<input type="radio" name="sex" v-model="sex" value="female" /><br><br>
			爱好：
			学习<input type="checkbox"  v-model="hobby" value="study"/>
			打游戏<input type="checkbox" v-model="hobby" value="game"/>
			吃饭<input type="checkbox" v-model="hobby" value="eat"/>
			<br><br>
			所属校区
			<select v-model="city">
				<option value ="">请选择校区</option>
				<option value ="beijing">北京</option>
				<option value ="shenzhen">深圳</option>
				<option value ="shanghai">上海</option>
				<option value ="wuhan">武汉</option>
			</select>
			<br><br>
			其他信息：
			<textarea rows="25" cols="25" v-model.lazy="other"></textarea><br><br>
			<input  type="checkbox" v-model="agree"/>阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
			<button type="button" @click="demo">提交</button>
		</form>
		</div>
		
		<script type="text/javascript">
			Vue.config.productionTip=false
			
			//创建vue实例
			const vm=new Vue({
				el:'#root',
				data:{
					account:"",
					passsword:"",
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:"",
					agree:false
				},
				methods:{
					demo(){
						console.log(this._data)
					}
				}
			})
		</script>
	</body>
</html>
